<div class="am-pull-to-refresh-content-wrapper">
  <div class="am-pull-to-refresh-content" [ngClass]="transtionCls" [ngStyle]="style">
    <div *ngIf="direction === 'down' || direction === ''" class="am-pull-to-refresh-indicator am-pull-to-refresh-header-indicator">
      <ng-template *ngIf="isTemplateRef(headerIndicator[state.currentState])" [ngTemplateOutlet]="headerIndicator[state.currentState]"></ng-template>
      <ng-container *ngIf="!isTemplateRef(headerIndicator[state.currentState])">{{headerIndicator[state.currentState]}}</ng-container>
    </div>
    <div #pullToRefresh>
      <ng-content></ng-content>
      <div *ngIf="direction === 'down' && endReachedRefresh" class="am-pull-to-refresh-indicator am-pull-to-refresh-footer-indicator">
        <ng-template *ngIf="isTemplateRef(footerIndicator[state.currentState])" [ngTemplateOutlet]="footerIndicator[state.currentState]"></ng-template>
        <ng-container *ngIf="!isTemplateRef(footerIndicator[state.currentState])">{{footerIndicator[state.currentState]}}</ng-container>
      </div>
    </div>
    <div *ngIf="direction === 'up' || direction === ''" class="am-pull-to-refresh-indicator am-pull-to-refresh-footer-indicator">
      <ng-template *ngIf="isTemplateRef(footerIndicator[state.currentState])" [ngTemplateOutlet]="footerIndicator[state.currentState]"></ng-template>
      <ng-container *ngIf="!isTemplateRef(footerIndicator[state.currentState])">{{footerIndicator[state.currentState]}}</ng-container>
    </div>
  </div>
</div>
